<template>
  <div class="personal-center">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">个人中心</h1>
        <div class="user-profile-card">
          <el-avatar :src="url + userInfo.yhtx" size="large" class="user-avatar" />
          <div class="user-info">
            <div class="user-name">{{ userInfo.yhnc || '用户' }}</div>
            <div class="user-meta">
              <span class="user-id">ID: {{ userInfo.yhid || '-' }}</span>
              <span class="user-role">{{ getUserRole(userInfo.yhsf) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-row :gutter="24">
      <el-col :span="24" :md="16">
        <!-- 账户信息 -->
        <div class="panel glass-card">
          <div class="panel-header accent-border">
            <h2 class="panel-title"><el-icon><User /></el-icon>账户信息</h2>
            <el-button type="primary" plain @click="dialogVisible = true" class="edit-btn">
              <el-icon><Edit /></el-icon>编辑信息
            </el-button>
          </div>

          <div class="info-grid">
            <div class="info-card hover-card">
              <div class="info-icon primary-bg">
                <el-icon><User /></el-icon>
              </div>
              <div class="info-content">
                <div class="info-label">用户账号</div>
                <div class="info-value">{{ userInfo.yhzh || '-' }}</div>
              </div>
            </div>

            <div class="info-card hover-card">
              <div class="info-icon success-bg">
                <el-icon><Timer /></el-icon>
              </div>
              <div class="info-content">
                <div class="info-label">注册时间</div>
                <div class="info-value">{{ formatDate(userInfo.zcsj) || '-' }}</div>
              </div>
            </div>

            <div class="info-card hover-card">
              <div class="info-icon warning-bg">
                <el-icon><Phone /></el-icon>
              </div>
              <div class="info-content">
                <div class="info-label">联系方式</div>
                <div class="info-value">{{ userInfo.phone || '-' }}</div>
              </div>
            </div>

            <div class="info-card hover-card">
              <div class="info-icon info-bg">
                <el-icon><UserFilled /></el-icon>
              </div>
              <div class="info-content">
                <div class="info-label">用户角色</div>
                <div class="info-value">{{ getUserRole(userInfo.yhsf) }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 店铺信息 -->
        <div class="panel glass-card" v-if="userInfo.yhsf === '6'">
          <div class="panel-header accent-border">
            <h2 class="panel-title"><el-icon><Shop /></el-icon>店铺信息</h2>
            <el-button type="success" plain @click="sjdialogVisible = true" class="edit-btn">
              <el-icon><Edit /></el-icon>编辑信息
            </el-button>
          </div>

          <div class="info-grid">
            <div class="info-card hover-card">
              <div class="info-icon primary-bg">
                <el-icon><Document /></el-icon>
              </div>
              <div class="info-content">
                <div class="info-label">商家ID</div>
                <div class="info-value">{{ sjForm.sjid }}</div>
              </div>
            </div>

            <div class="info-card hover-card">
              <div class="info-icon success-bg">
                <el-icon><Shop /></el-icon>
              </div>
              <div class="info-content">
                <div class="info-label">店铺名称</div>
                <div class="info-value">{{ sjForm.name }}</div>
              </div>
            </div>

            <div class="info-card hover-card">
              <div class="info-icon warning-bg">
                <el-icon><Location /></el-icon>
              </div>
              <div class="info-content">
                <div class="info-label">店铺地址</div>
                <div class="info-value">{{ sjForm.address }}</div>
              </div>
            </div>

            <div class="info-card hover-card">
              <div class="info-icon" :class="getStatusColor(sjForm.status)">
                <el-icon><CircleCheck /></el-icon>
              </div>
              <div class="info-content">
                <div class="info-label">店铺状态</div>
                <div class="info-value">
                  <el-tag :type="getTagType(sjForm.status)" size="small">
                    {{ sjForm.status }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 地址管理 -->
        <div class="panel glass-card">
          <div class="panel-header accent-border">
            <h2 class="panel-title"><el-icon><Location /></el-icon>地址管理</h2>
            <el-button type="primary" @click="showAddAddressDialog = true" class="add-btn">
              <el-icon><Plus /></el-icon>新增地址
            </el-button>
          </div>

          <div class="address-list">
            <transition-group name="address-list" tag="div">
              <div
                  v-for="address in addressInfo"
                  :key="address.dzid"
                  class="address-item hover-card"
              >
                <div class="address-content">
                  <el-icon class="address-icon"><Location /></el-icon>
                  <span class="address-text">{{ address.address }}</span>
                </div>
                <el-button type="primary" link @click="showUpdateDialog(address)" class="edit-address-btn">
                  <el-icon><Edit /></el-icon>编辑
                </el-button>
              </div>
            </transition-group>

            <div v-if="addressInfo.length === 0" class="empty-address">
              <div class="empty-icon">
                <el-icon><Location /></el-icon>
              </div>
              <div class="empty-text">暂无地址信息</div>
              <div class="empty-subtext">添加您的第一个地址</div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="24" :md="8">
        <!-- 我的钱包 -->
        <div class="panel wallet-card gradient-card">
          <div class="wallet-header">
            <h2 class="panel-title white-text"><el-icon><Coin /></el-icon>我的钱包</h2>
            <div class="wallet-balance">
              <div class="balance-label">账户余额</div>
              <div class="balance-amount">¥ {{ balance }}</div>
            </div>
          </div>

          <div class="wallet-content">
            <div class="recharge-section">
              <el-input-number
                  v-model="num"
                  :precision="2"
                  :step="10"
                  :max="10000"
                  :min="1"
                  placeholder="充值金额"
                  controls-position="right"
                  size="large"
                  class="recharge-input"
              />
              <el-button
                  @click="handleRecharge"
                  :disabled="loadingRecharge || num <= 0"
                  type="primary"
                  size="large"
                  class="recharge-btn"
              >
                <el-icon v-if="loadingRecharge"><Loading /></el-icon>
                {{ loadingRecharge ? '充值中...' : '立即充值' }}
              </el-button>
            </div>

            <div v-if="rechargeSuccess" class="recharge-message success">
              <el-icon><SuccessFilled /></el-icon>
              <span>充值成功！</span>
            </div>
            <div v-if="rechargeError" class="recharge-message error">
              <el-icon><CircleCloseFilled /></el-icon>
              <span>{{ rechargeError }}</span>
            </div>

            <div class="wallet-tips">
              <div class="tip-item">
                <el-icon><InfoFilled /></el-icon>
                <span>余额可用于平台消费</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 角色申请 -->
        <div class="panel role-card gradient-card" v-if="userInfo.yhsf === '3'">
          <h2 class="panel-title white-text"><el-icon><User /></el-icon>角色申请</h2>
          <div class="role-options">
            <div class="role-item hover-card" @click="sjDialogVisible = true">
              <div class="role-icon primary-bg">
                <el-icon><Shop /></el-icon>
              </div>
              <div class="role-text">
                <div class="role-name">成为商家</div>
                <div class="role-desc">开启店铺经营</div>
              </div>
              <el-icon class="arrow-icon"><ArrowRight /></el-icon>
            </div>
            <div class="role-item hover-card" @click="qsDialogVisible = true">
              <div class="role-icon success-bg">
                <el-icon><Bicycle /></el-icon>
              </div>
              <div class="role-text">
                <div class="role-name">成为骑手</div>
                <div class="role-desc">接单配送服务</div>
              </div>
              <el-icon class="arrow-icon"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 所有对话框保持原有逻辑 -->
    <!-- 编辑个人信息对话框 -->
    <el-dialog v-model="dialogVisible" title="编辑个人信息" class="custom-dialog" width="500px">
      <el-form label-width="80px" class="dialog-form">
        <div class="avatar-upload-section">
          <el-upload
              drag
              action="/api/file/upload"
              :on-success="handleFileUploadSuccess"
              class="avatar-uploader"
          >
            <el-avatar :src="url + userInfo.yhtx" size="large" class="avatar-preview" />
            <div class="upload-text">点击更换头像</div>
          </el-upload>
        </div>

        <el-form-item label="用户昵称">
          <el-input v-model="userInfo.yhnc" placeholder="请输入用户昵称"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="userInfo.phone" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userInfo.pwd" type="password" placeholder="请输入新密码"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="updateUserInfo" class="confirm-btn">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑店铺信息对话框 -->
    <el-dialog v-model="sjdialogVisible" title="编辑店铺信息" class="custom-dialog" width="500px">
      <el-form label-width="80px" class="dialog-form">
        <div class="avatar-upload-section">
          <el-upload
              drag
              action="/api/file/upload"
              :on-success="handleFile"
              class="avatar-uploader"
          >
            <el-avatar :src="url + sjForm.sjtp" size="large" class="avatar-preview" v-if="sjForm.sjtp" />
            <el-icon v-else class="avatar-placeholder"><Shop /></el-icon>
            <div class="upload-text">点击更换店铺头像</div>
          </el-upload>
        </div>

        <el-form-item label="店铺名称">
          <el-input v-model="sjForm.name" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址">
          <el-input v-model="sjForm.address" placeholder="请输入店铺地址"></el-input>
        </el-form-item>
        <el-form-item label="店铺状态">
          <el-select v-model="sjForm.status" placeholder="请选择店铺状态" style="width: 100%">
            <el-option label="营业中" value="营业中"></el-option>
            <el-option label="暂停营业" value="暂停营业"></el-option>
            <el-option label="关闭" value="关闭"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="sjdialogVisible = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="updateShangjiaInfo" class="confirm-btn">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 成为商家对话框 -->
    <el-dialog title="我要成为商家" v-model="sjDialogVisible" width="500px" class="custom-dialog">
      <el-form :model="form" label-width="80px" class="dialog-form">
        <el-form-item label="商家名称">
          <el-input v-model="form.name" placeholder="请输入商家名称"></el-input>
        </el-form-item>
        <el-form-item label="起送费">
          <el-input v-model="form.qsf" placeholder="请输入起送费"></el-input>
        </el-form-item>
        <el-form-item label="打包费">
          <el-input v-model="form.dbf" placeholder="请输入打包费"></el-input>
        </el-form-item>
        <el-form-item label="配送费">
          <el-input v-model="form.psf" placeholder="请输入配送费"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.sjphone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="店铺图片">
          <el-upload
              drag
              action="/api/file/upload"
              :on-success="handleSjtp"
              class="image-uploader"
          >
            <el-icon v-if="!form.sjtp" class="upload-icon"><Picture /></el-icon>
            <img v-else :src="url + form.sjtp" class="image-preview" />
            <div class="upload-text">点击上传店铺图片</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="sjDialogVisible = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="submitForm1" class="confirm-btn">提交申请</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 成为骑手对话框 -->
    <el-dialog title="我要成为骑手" v-model="qsDialogVisible" width="500px" class="custom-dialog">
      <el-form :model="qsForm" label-width="80px" class="dialog-form">
        <el-form-item label="骑手姓名">
          <el-input v-model="qsForm.qsmz" placeholder="请输入骑手姓名"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="qsDialogVisible = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="submitFormsj1" class="confirm-btn">提交申请</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 新增地址对话框 -->
    <el-dialog v-model="showAddAddressDialog" title="新增地址" width="500px" class="custom-dialog">
      <el-form :model="newAddress" label-width="80px" class="dialog-form">
        <el-form-item label="地址">
          <el-input v-model="newAddress.address" placeholder="请输入详细地址" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddAddressDialog = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="submitAddAddress" class="confirm-btn">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑地址对话框 -->
    <el-dialog v-model="updateDialogVisible" title="编辑地址" width="500px" class="custom-dialog">
      <el-form :model="editAddress" label-width="80px" class="dialog-form">
        <el-form-item label="地址">
          <el-input v-model="editAddress.address" placeholder="请输入详细地址" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateDialogVisible = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="submitEditAddress" class="confirm-btn">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import { useUserStore } from "../stores/user.ts"
import axios from "axios"
import {
  User, Location, Coin, Shop, SuccessFilled, CircleCloseFilled,
  Edit, Timer, Phone, UserFilled, Document, CircleCheck,
  Plus, ArrowRight, Bicycle, InfoFilled, Loading, Picture
} from '@element-plus/icons-vue'

const url = "http://localhost:8088/team/upload/"

const sjdialogVisible = ref(false)
const loadingShangjia = ref(false)
const shangjiaInfo = async () => {
  if(userInfo.value.yhsf !== '6'){
    return
  }
  loadingShangjia.value = true
  const {data} = await axios.get(`/api/shangjia/id/${userInfo.value.sjid}`)
  if(data.code === 200){
    sjForm.value = data.data
    loadingShangjia.value = true
  }
}

const sjForm = ref({
  sjid: '',
  name: '',
  address: '',
  status: '',
  sjtp:''
})

const handleFile = (fileName) => {
  if (fileName != null || fileName !== '') {
    sjForm.value.sjtp = fileName
    ElMessage({type: 'success',message:'文件上传成功'})
  }else{
    ElMessage({type: 'error',message:'文件上传失败'})
  }
}

const updateShangjiaInfo = async () => {
  const {data} = await axios.put('/api/shangjia',sjForm.value)
  console.log(data)
  if(data.code === 200){
    ElMessage({type: 'success',message:'更新信息成功'})
    loadingShangjia.value = false
  } else {
    ElMessage({type: 'error',message:'更新信息失败'})
  }
}

// 状态管理
const loadingUserInfo = ref(false)
// 账号信息
const userStore = useUserStore()
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
const addressInfo = ref([])
const balance = ref(0)
const loadingBalance = ref(true)
const num = ref(0)
const loadingRecharge = ref(false)
const rechargeSuccess = ref(false)
const rechargeError = ref('')

const sjDialogVisible = ref(false)
const qsDialogVisible = ref(false)
const form = ref({
  name: '',
  qsf: '',
  dbf: '',
  psf: '',
  address: '',
  sjtp: '',
  sjphone: ''
})

const handleSjtp = (fileName) => {
  if (fileName != null || fileName !== '') {
    form.value.sjtp = fileName
    ElMessage({type: 'success',message:'文件上传成功'})
  }else{
    ElMessage({type: 'error',message:'文件上传失败'})
  }
}

const submitForm1 = async () => {
  const shenfen = ref({
    yhid:userInfo.value.yhid,
    yhsf:'6'
  })
  const {data} = await axios.put('/api/shenfen',shenfen.value)
  if(data.code === 200){
    await submitForm2()
  }
}

const submitForm2 = async () => {
  form.value.yhid = userInfo.value.yhid
  const {data} = await axios.post('/api/shangjia',form.value)
  if(data.code === 200){
    ElMessage({type: 'success',message:'恭喜你成为商家'})
    sjDialogVisible.value = false
    alert("请重新登录")
    window.location.reload()
    userStore.clearUser();
  }
}

const qsForm = ref({
  qsmz: ''
})

const submitFormsj1 = async () => {
  const shenfen = ref({
    yhid:userInfo.value.yhid,
    yhsf:'9'
  })
  const {data} = await axios.put('/api/shenfen',shenfen.value)
  if(data.code === 200){
    await submitFormsj2()
  }
}

const submitFormsj2 = async () => {
  qsForm.value.yhid = userInfo.value.yhid
  const {data} = await axios.post('/api/qishou',qsForm.value)
  if(data.code === 200){
    ElMessage({type: 'success',message:'恭喜你成为骑手'})
    qsDialogVisible.value = false
    alert("请重新登录")
    window.location.reload()
    userStore.clearUser();
  }
}

//--------------------新增地址相关-----------------
const showAddAddressDialog = ref(false)
const newAddress = ref({
  address: ''
})
const dialogVisible = ref(false)

//-文件上传处理-
const handleFileUploadSuccess = (fileName) => {
  if (fileName != null || fileName !== '') {
    userInfo.value.yhtx = fileName;
    ElMessage({type: 'success',message:'文件上传成功'})
  }else{
    ElMessage({type: 'error',message:'文件上传失败'})
  }
}

const updateUserInfo = async () => {
  const {data} = await axios.put(`/api/shenfen`,userInfo.value)
  if(data.code === 200){
    ElMessage({type: 'success',message:'更新成功'})
    dialogVisible.value = false
    localStorage.setItem('userInfo', JSON.stringify(data.data))
    userStore.setUser(data.data)
    window.location.reload()
  }
}

//---------------------------提交新增地址------------------------------
const submitAddAddress = async () => {
  try {
    const addData = {
      yhid: userInfo.value.yhid,
      address: newAddress.value.address
    }
    const { data } = await axios.post('/api/dizhi', addData)
    if (data.code === 200) {
      ElMessage.success('地址新增成功')
      showAddAddressDialog.value = false
      newAddress.value.address = ''
      await getAddress()
    } else {
      ElMessage.error(data.message || '地址新增失败')
    }
  } catch (error) {
    console.error('新增地址失败:', error)
    ElMessage.error('新增地址时发生网络错误')
  }
}

//-------------------- 编辑地址相关---------------
const updateDialogVisible = ref(false)
const editAddress = ref({
  dzid: '',
  address: ''
})

//文件上传
const currentEditDzid = ref('')

//-----------------------获取用户地址表--------------------------
const getAddress = async () => {
  const {data} = await axios.get(`/api/dizhi/byYhid/${userInfo.value.yhid}`)
  if(data.code === 200){
    addressInfo.value = data.data
  }
}

//-------------------------显示编辑地址dialog-------------------------
const showUpdateDialog = (row) => {
  currentEditDzid.value = row.dzid
  editAddress.value.address = row.address
  updateDialogVisible.value = true
}

//------------------------提交编辑地址-------------------------
const submitEditAddress = async () => {
  try {
    const updateData = {
      dzid: currentEditDzid.value,
      address: editAddress.value.address
    }
    const { data } = await axios.put('/api/dizhi', updateData)
    if (data.code === 200) {
      ElMessage.success('地址更新成功')
      updateDialogVisible.value = false
      await getAddress()
    } else {
      ElMessage.error(data.message || '地址更新失败')
    }
  } catch (error) {
    console.error('更新地址失败:', error)
    ElMessage.error('更新地址时发生网络错误')
  }
}

//-----------------------获取用户余额------------------------------
const getBalance = async () =>{
  try {
    const {data} = await axios.get(`/api/payment/balance/${userInfo.value.yhid}`)
    if(data.code === 200){
      balance.value = data.data;
      if(userInfo.value.balance !== data.data) {
        userInfo.value.balance = data.data;
        userStore.setUser(userInfo.value)
        window.location.reload()
      }

    }
  } catch (error) {
    console.error('获取余额失败:', error);
    ElMessage.error('获取余额失败，请稍后重试');
  } finally {
    loadingBalance.value = false;

  }
}

//----------------------------充值-----------------------------
const handleRecharge = async () => {
  if (num.value <= 0) {
    ElMessage.warning('请输入有效的充值金额');
    return;
  }
  loadingRecharge.value = true;
  rechargeSuccess.value = false;
  rechargeError.value = '';

  try {
    const { data } = await axios.put(`/api/payment/recharge/${userInfo.value.yhid}`, num.value, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    console.log(data);
    if (data.code === 200) {
      rechargeSuccess.value = true;
      await getBalance();
      num.value = 0;
      setTimeout(() => {
        rechargeSuccess.value = false;
      }, 3000);
    } else {
      rechargeError.value = data.message || '充值失败，请稍后重试';
    }
  } catch (error) {
    console.error('充值失败:', error);
    rechargeError.value = '充值失败，请检查网络连接';
  } finally {
    loadingRecharge.value = false;
  }
}

// -----------------------格式化日期--------------------------------
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 获取用户角色名称
const getUserRole = (role) => {
  const roles = {
    '1': '管理员',
    '3': '普通用户',
    '6': '商家',
    '9': '骑手'
  }
  return roles[role] || '未知'
}

// 获取状态颜色
const getStatusColor = (status) => {
  if (status === '营业中') return 'success-bg'
  if (status === '暂停营业') return 'warning-bg'
  if (status === '关闭') return 'danger-bg'
  return 'info-bg'
}

// 获取标签类型
const getTagType = (status) => {
  if (status === '营业中') return 'success'
  if (status === '暂停营业') return 'warning'
  if (status === '关闭') return 'danger'
  return 'info'
}

onMounted(() => {
  userStore.setUser(JSON.parse(localStorage.getItem('userInfo') || 'null'))
  getAddress()
  getBalance()
  shangjiaInfo()
})
</script>

<style scoped>
.personal-center {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background: white;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.page-title {
  color: #333;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #f58147 0%, #ff6b35 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.user-profile-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.user-avatar {
  width: 70px !important;
  height: 70px !important;
  border: 3px solid #f58147;
  box-shadow: 0 4px 12px rgba(245, 129, 71, 0.3);
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.user-meta {
  display: flex;
  gap: 15px;
}

.user-id, .user-role {
  font-size: 0.9rem;
  padding: 3px 10px;
  border-radius: 20px;
}

.user-id {
  background: #e3f2fd;
  color: #1976d2;
}

.user-role {
  background: #f1f8e9;
  color: #388e3c;
}

.panel {
  background: white;
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
}

.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
}

.gradient-card {
  background: #FF9966;
}

.panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.accent-border {
  border-bottom: 3px solid #f58147;
  padding-bottom: 20px;
  margin-bottom: 25px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.panel-title {
  color: #f58147;
  font-size: 1.4rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.white-text {
  color: white !important;
}

.edit-btn, .add-btn {
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.info-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
}

.info-card:hover {
  background: white;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  border-color: #dee2e6;
}

.info-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.primary-bg { background-color: #336699 }
.success-bg { background-color: #99CC99 }
.warning-bg { background-color: #99CCFF }
.danger-bg { background: linear-gradient(135deg, #8cea35 0%, #d93025 100%); }
.info-bg {background-color: #CCCCFF}

.info-content {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 5px;
  font-weight: 500;
}

.info-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
}

.address-item:hover {
  background: white;
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.address-content {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #495057;
  font-size: 1rem;
}

.address-icon {
  color: #f58147;
  font-size: 1.2rem;
}

.edit-address-btn {
  padding: 8px 15px;
  border-radius: 8px;
  font-weight: 500;
}

.empty-address {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  color: #ced4da;
}

.empty-text {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 5px;
}

.empty-subtext {
  font-size: 0.9rem;
  color: #adb5bd;
}

.wallet-header {
  margin-bottom: 25px;
}

.wallet-balance {
  text-align: center;
  margin: 25px 0;
}

.balance-label {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
}

.balance-amount {
  font-size: 2.8rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.wallet-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.recharge-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.recharge-input {
  width: 100%;
}

.recharge-btn {
  width: 100%;
  background: white;
  color: #f58147;
  border: none;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.recharge-btn:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.recharge-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 1.1rem;
}

.recharge-message.success {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.recharge-message.error {
  background: rgba(255, 0, 0, 0.2);
  color: white;
  border: 1px solid rgba(255, 0, 0, 0.3);
}

.wallet-tips {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 15px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.role-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.role-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.role-item:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
}

.role-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.role-text {
  flex: 1;
}

.role-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.role-desc {
  font-size: 0.9rem;
  opacity: 0.9;
}

.arrow-icon {
  font-size: 1.2rem;
  opacity: 0.8;
}

.dialog-form {
  padding: 20px 0;
}

.avatar-upload-section {
  text-align: center;
  margin-bottom: 25px;
}

.avatar-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.avatar-preview {
  width: 100px !important;
  height: 100px !important;
  border: 3px solid #f58147;
  box-shadow: 0 4px 12px rgba(245, 129, 71, 0.3);
}

.avatar-placeholder {
  font-size: 3rem;
  color: #f58147;
  width: 100px;
  height: 100px;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #f58147;
}

.upload-text {
  color: #6c757d;
  font-size: 0.9rem;
}

.image-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  border: 2px dashed #e9ecef;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.image-uploader:hover {
  border-color: #f58147;
  background: #fff9f2;
}

.upload-icon {
  font-size: 3rem;
  color: #ced4da;
}

.image-preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding-top: 20px;
}

.cancel-btn {
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
}

.confirm-btn {
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  background: linear-gradient(135deg, #f58147 0%, #ff6b35 100%);
  border: none;
}

.address-list-enter-active, .address-list-leave-active {
  transition: all 0.3s ease;
}

.address-list-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.address-list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.custom-dialog .el-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.custom-dialog .el-dialog__header {
  background: linear-gradient(135deg, #f58147 0%, #ff6b35 100%);
  color: white;
  padding: 20px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.custom-dialog .el-dialog__title {
  color: white;
  font-weight: 600;
  font-size: 1.3rem;
}

.custom-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .personal-center {
    padding: 15px;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .user-profile-card {
    width: 100%;
  }

  .panel {
    padding: 20px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .address-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .role-options {
    gap: 15px;
  }

  .role-item {
    padding: 15px;
  }

  .balance-amount {
    font-size: 2.2rem;
  }
}
</style>
